<template>
  <!--下拉单选框-->
  <div class="base-select colorF font_s18" @click="showDataList" v-bind:style="{width: widthData}">
    <div class="sub-selected-value">
      {{selectedValue.value}}<!--显示选择的值-->
      <div class="sub-select-list" v-if="showData">
        <div
          class="sub-select-item"
          v-for="(item, index) in dataList"
          :key="index"
          @click.stop="select(item)">
          {{item.value}}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Bus from '../../assets/bus.js'
export default {
  name: 'BaseSelect',
  data () {
    return {
      showData: false
    }
  },
  props: {
    dataList: Array,
    selectedValue: Object, // 传回父组件的选择值
    page: Number,
    widthData: {
      type: String,
      default: '11.25rem'
    }
  },
  methods: {
    showDataList () {
      this.showData = !this.showData
    },
    select (item) {
      this.showData = false
      // 赋值的时候要分开写
      this.selectedValue.key = item.key
      this.selectedValue.value = item.value
      this.$emit('select')
      Bus.$emit('videoUrl', item.key)
      if (this.page === 1) {
        Bus.$emit('pageIndex', 1)
      } else {
        Bus.$emit('pageIndex', 2)
      }
      // console.log('0' + this.selectedValue.value)
    }
  },
  mounted () {
  }
}
</script>
<style lang="scss" scoped>
  .base-select {
    position: absolute;
    right: 2rem;
    top: 0;
    height: 2.55rem;
    text-align: left;
    align-items: center;
    //width: 160px;
    &:after {
      position: absolute;
      top: 50%;
      right: -1.5rem;
      transform: translateY(-40%);
      content: '';
      width: 0;
      border-top: 5px solid #006DFF;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      height: 0;
    }
    .sub-selected-value {
      padding-left: 1rem;
      .sub-select-list {
        position: absolute;
        padding-top: 1rem;
        top: 2.125rem;
        background: url("../../assets/img/dataSea/pop_bg.png");
        background-size: 100% 100%;
        //width: 160px;
        z-index: 9;
        .sub-select-item {
          width: auto;
          min-width: 7.25rem;
          height: 2.5rem;
          line-height: 2.5rem;
          position: relative;
          text-align: center;
          img {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translate(-0.1rem, -50%);
            width: .8125rem;
            height: .625rem;
          }
        }
      }
    }
  }
</style>
